/**
 * Created by Dalyn on 2017/5/8.
 */
import React from "react";
import {hashHistory} from 'react-router';
import Relay from "react-relay";
import {Table,Select,Input,Icon,message} from 'antd';
const Option = Select.Option;
import ReactKey from "../../../util/ReactKey";
import Util from "../../../util/Util";
import GetPlanDetailMutation from './mutation/GetPlanDetailMutation';
import GetProDigestMutation from "../productionLicense/mutation/GetProDigestMutation"
import SavePlanDetailMutation from "./mutation/SavePlanDetailMutation"
import "../css/fabricRaw.css";
import "../css/productionManagement_common.css";
import SelectMaterialModal from "./SelectMaterialModal";
import DemandQuantityModal from "./DemandQuantityModal";
import AddPictureModal from "./AddPictureModal";
import GetQiNiuToken from "../productionLicense/mutation/GetQiNiuTokenMutation"  //上传图片获取token
import DelQiniuFileMutation from "../productionLicense/mutation/DelQiniuFileMutation" // 删除图片
import AddImgModal from "./AddImgModal";
import Config from "../../../util/Config"
import {Button} from 'fly';

export default class FabricRawEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editable: true,
            value: '',
            proDigestModel: [],
            context: [{}, {}],
            proMaterialIds: [],
            dataSource: [],
            materialIndex: 0,
            demandQuantityIndex: 0,
            loading: true,
            pdId: this.props.location.state.pdId,
            /*删除项*/
            planIdsDel: [],
            /**/
            isSave: true,
            /*需求数*/
            planId:"",
            planNeedCountModelList:[],
            materielType:"",
            token:null,
        };
        this.isEmpty = true;
        this.isSave = true;
        this.planIdsDel = [];
        this.planDetailModelList = null;
        this.messageFlag = true;
        /*ref数组*/
        this.ref_thisTimeCount = [];
        /*物料类型--订单类型*/
        this.materiel_order={
            "1":"3",
            "2":"2",
            "3":"2",
        };
        this.materielType = {
            "1":"面料",
            "2":"缝制辅料",
            "3":"包装辅料",
        };
        this.addimgUrl = Config.qiuniu;
        this.delete_key = [];
    }

    componentWillMount() {
        this.proDigest();
        this.getPlanDetail();
        this.getQiniuToken();
    }

    /*表格上方信息*/
    proDigest(pageSize, pageNum) {
        Relay.Store.commitUpdate(
            new GetProDigestMutation({
                pdId: this.state.pdId,
            }),
            {
                onFailure: () => {
                    message.error("网络请求失败")
                },
                onSuccess: (response) => {
                    let errorCode = response.getProDigest.responseData.errorCode;
                    let value = response.getProDigest.responseData.value;
                    if (errorCode == '0') {
                        let proDigestModel = response.getProDigest.responseData.proDigestModel;
                        this.setState({
                            proDigestModel: proDigestModel,
                        });
                    } else if (errorCode == 500) {
                        message.error('服务器错误，请联系系统管理员')
                    }
                }
            }
        )
    }

    /*拉取表格数据*/
    getPlanDetail() {
        Relay.Store.commitUpdate(
            new GetPlanDetailMutation({
                pdId: this.state.pdId,
            }),
            {
                onFailure: () => {
                    message.error("网络请求失败");
                    this.setState({
                        loading: false
                    })
                },
                onSuccess: (response) => {
                    let errorCode = response.getPlanDetail.responseData.errorCode;
                    if (errorCode == 0) {
                        let planDetailModelList = response.getPlanDetail.responseData.planDetailModelList;
                        if (planDetailModelList.length <= 0) {
                            planDetailModelList.push({
                                pdId: this.state.pdId || null,
                                planId: null,
                                productName: null,
                                imgUrl: null,
                                specification: null,
                                colour: null,
                                prickle: null,
                                needCount: null,
                                thisTimeCount: null,
                                totalCount: null,
                                varianceCount: null,
                                ratio: null,
                                remark: null,
                                planNeedCountModelList: null,
                            })
                        }
                        // console.log("g",planDetailModelList);
                        this.planDetailModelList = JSON.parse(JSON.stringify(planDetailModelList));
                        this.setState({
                            dataSource: planDetailModelList,
                            loading: false
                        })
                    } else if (errorCode == 500) {
                        message.error('服务器错误，请联系系统管理员')
                    }
                }

            }
        );
    }

    /*保存表格数据*/
    savePlanDetail() {
        let this_ =this;
        let dataSourceSelf = this.state.dataSource;
        dataSourceSelf.map((v,i)=>{
            v.planNeedCountJSON = JSON.stringify(v.planNeedCountModelList);
        });
        let ref_thisTimeCount = this.ref_thisTimeCount;
        Relay.Store.commitUpdate(
            new SavePlanDetailMutation({
                pdId: this.state.pdId,
                planIds: this.planIdsDel.join(","),
                planDetailJSON: JSON.stringify(dataSourceSelf),
            }),
            {
                onFailure: () => {
                    message.error("网络请求失败");
                    this.isSave = true;
                    this.setState({
                        loading: false,
                        // isSave: true,
                    })
                },
                onSuccess: (response) => {
                    let errorCode = response.savePlanDetail.responseData.errorCode;
                    if (errorCode == 0) {
                        let planDetailModelList = response.savePlanDetail.responseData.planDetailModelList;
                        if (!planDetailModelList.length) {
                            planDetailModelList.push({
                                pdId: this.state.pdId || null,
                                planId: null,
                                productName: null,
                                imgUrl: null,
                                specification: null,
                                colour: null,
                                prickle: null,
                                needCount: null,
                                thisTimeCount: null,
                                totalCount: null,
                                varianceCount: null,
                                ratio: null,
                                remark: null,
                                planNeedCountModelList: null,
                            })
                        }
                        /*清空待删除项的数组*/
                        this.planIdsDel = [];
                        this.planDetailModelList = JSON.parse(JSON.stringify(planDetailModelList));
                        // console.log("b",planDetailModelList);
                        this.setState({
                            dataSource: planDetailModelList,
                        },()=>{
                            Util.messageHint(this_,"success","保存成功")
                            this.isSave = true
                        });
                        this.deletepic_all();//统一删除七牛图片缓存
                        /*点击保存，清空本次到料数*/
                        ref_thisTimeCount.map((v,i)=>{
                            if(v&&v.value){
                                v.value = ""
                            }
                        })
                    } else if (errorCode == 500) {
                        message.error('服务器错误，请联系系统管理员')
                    }
                    this.setState({
                        loading: false,
                        // isSave: true,
                    });
                }
            }
        );
    }

    /*点击保存*/
    saveMateriaClick() {
        this.isEmpty = true;
        let newData = [];
        let dataSource = this.state.dataSource;
        let reg = /^\s*$/g;
        dataSource.map((v, i) => {
            //console.log(v.materielType);
            /*默认为物料名称--面料*/
            if(!v.materielType){
                v.materielType = "1"
            }
            /**/
            if (v.productName == undefined || v.productName == null || v.productName == "" ||
                v.needCount == undefined || v.needCount == null || v.needCount == "" || reg.test(v.needCount)) {
                this.isEmpty = false;
                return
            } else if (v.productName && v.productName.length <= 0) {
                this.isEmpty = false;
                return
            }
        });
        if (this.isEmpty == false) {
            message.warning("物料名称和需求数不能为空");
            return
        }
        if (this.isEmpty && this.isSave) {
            /*防止快速点击*/
            this.isSave = false;
            this.savePlanDetail();
          /*  this.setState({
                isSave: false,
            }, this.savePlanDetail);*/
        }
        /*this.setState({
         // proMaterialIds: this.proMaterialIds
         },this.savePlanDetail);*/
    }

    /*删除行*/
    onDelete(index, planId) {
        /*dataSource dataSourceSelf分别代表两个数组，指针不同*/
        const dataSource = [...this.state.dataSource];
        const dataSourceSelf = [...this.planDetailModelList];
        dataSource.splice(index, 1);
        dataSourceSelf.splice(index, 1);
        if (planId) {
            this.planIdsDel.push(planId);
        }
        this.planDetailModelList = dataSourceSelf;
        this.setState({
            dataSource
        });
    }

    /*添加行*/
    handleAdd = () => {
        const {dataSource} = this.state;
        const dataSourceSelf = this.planDetailModelList;
        if (dataSource.length >= 1000) {
            message.warning("最多添加1000条");
            return;
        }
        const newData = {
            pdId: this.state.pdId || null,
            planId: null,
            productName: null,
            imgUrl: null,
            specification: null,
            colour: null,
            prickle: null,
            needCount: null,
            thisTimeCount: null,
            totalCount: null,
            varianceCount: null,
            ratio: null,
            remark: null,
            planNeedCountModelList: null,
        };
        let newDataSelf = JSON.parse(JSON.stringify(newData));
        this.planDetailModelList = [...dataSourceSelf, newDataSelf];
        this.setState({
            dataSource: [...dataSource, newData],
        });
    }
    /*手动输入*/
    InputChange(contextname, index, e) {
        let ref_thisTimeCount = this.ref_thisTimeCount;
        let dataSource = this.state.dataSource;
        if (!dataSource[index]) {
            dataSource[index] = {}
        }
        let totalCount = Number(this.planDetailModelList[index].totalCount);
        let text = e.target.value;
        let reg1 = /^([0-9]{0,10})$/;
        let reg2 = /^([0-9]{0,10})+\.?[0-9]{0,2}$/;
        //提示+定时器
        let messageHint = (hintText)=>{
            hintText = hintText?hintText:"";
            if (this.messageFlag) {
                this.messageFlag = false;
                message.info(hintText);
                clearTimeout(this.messageTime);
                this.messageTime = setTimeout(() => {
                    this.messageFlag = true;
                }, 1800);
                return
            }
        }
        //加限制条件
        if (contextname == 'thisTimeCount') {
            let needCount = dataSource[index].needCount;
            if (!needCount) {
                messageHint("请先填写需求数");
            }

            text = Number(text);
            if (!reg1.test(text)) {
                ref_thisTimeCount[index].value = null;
                return
            } else if (text.length > 10) {
                ref_thisTimeCount[index].value = e.target.value.toString(0, 10);
                return
            }
            /*累积到料计算*/
            dataSource[index].totalCount = totalCount + text;  // 转换
        }
        if (contextname == 'remark') {
            // let str_temp = text.replace(/[\u4e00-\u9fa5]/g, 'aa');//将汉字替换为aa
            if (text.length >= 50) {
                messageHint("最多可输入50个字符");
                // e.target.value = text.toString(0,50);
                // return
            }
        }
        if (contextname == 'productName') {
            if (text.length >= 50) {
                messageHint("最多可输入50个字符");
            }
        }
        if (contextname == 'specification') {
            if (text.length >= 50) {
                messageHint("最多可输入50个字符");
            }
        }
        if (contextname == 'colour') {
            if (text.length >= 50) {
                messageHint("最多可输入50个字符");
            }
        }
        if (contextname == 'prickle') {
            if (text.length >= 50) {
                messageHint("最多可输入50个字符");
            }
        }
        // 赋值
        dataSource[index][contextname] = text;
        this.setState({
            dataSource: dataSource,
        },()=>{
            this.isSave = true
        });

    }

    /*物料名称数据*/
    selectMaterial(index,list) {
        let dataSourceSelf = JSON.parse(JSON.stringify(this.state.dataSource));
        // let dataSourceSelf = dataSource.concat(list);

        dataSourceSelf[index].productName = list[0].productName;
        dataSourceSelf[index].specification = list[0].specification;
        dataSourceSelf[index].colour = list[0].colour;
        dataSourceSelf[index].prickle = list[0].prickle;
        dataSourceSelf[index].needCount = list[0].needCount;
        dataSourceSelf[index].materielType = list[0].materielType;
        dataSourceSelf[index].orderType = this.materiel_order[list[0].materielType];
        /*需求数弹框数据*/
        let needData = [];
        let needData_obj = {};
        needData_obj.planId= this.state.planId || null;
        needData_obj.needCountId=null;
        needData_obj.sizeGroup= list[0].size;//尺码-尺码组
        needData_obj.compactCount= list[0].quantity;//合同数
        needData_obj.dosage= list[0].dosage;//用量/件
        needData_obj.expend= list[0].consume;//损耗
        needData_obj.needCount= list[0].needCount;

        const newData = {
            planId: this.state.planId || null,
            needCountId:null,
            dosage: null,
            expend: null,
            needCount: null,
            sizeGroup: null,
            compactCount: null,
        };
        dataSourceSelf[index].planNeedCountModelList = [...needData,needData_obj];
        this.setState({
            dataSource: dataSourceSelf
        }, () => {
            this.refs.SelectMaterialModal.setState({
                SelectMaterialFlag: false,
                selectedRowKeys: [],
            });
        });
    }

    /*物料点击*/
    materialClick(record, index) {
        let { proDigestModel} = this.state;
        this.setState({
            materialIndex: index,
        });
        //每点击一次发一次请求-数据实时更新
        this.refs.SelectMaterialModal.setState({
            SelectMaterialFlag: true,
            loading: true,
            selectedRowKeys: [],
        }, this.refs.SelectMaterialModal.FindMaterielBill(proDigestModel.orderId,proDigestModel.styleNo));
    }

    /*点击需求数量*/
    demandQuantityClick(record, index) {
        // debugger
        let {dataSource} = this.state;
        let dataSelf = dataSource[index].planNeedCountModelList;
        dataSelf = dataSelf ? dataSelf : [];
        const newData = {
            planId: record.planId,
            needCountId:null,
            dosage: null,
            expend: null,
            needCount: null,
            sizeGroup: null,
            compactCount: null,
        };
        if(dataSelf&&dataSelf.length>=1){
            /*有值,则小表格默认加一行,最后一行是总数*/
            this.setState({
                planNeedCountModelList:[...dataSelf,newData],
                planId: record.planId,
                demandQuantityIndex: index,
                loading: false
            },()=>{
                this.refs.DemandQuantityModal.setState({
                    DemandQuantityFlag: true,
                })
            });
        }else {
            /*为空,则小表格默认加二行,最后一行是总数*/
            this.setState({
                planNeedCountModelList: [...dataSelf, newData,newData],
                planId: record.planId,
                demandQuantityIndex: index,
                loading:false,
            },()=>{
                this.refs.DemandQuantityModal.setState({
                    DemandQuantityFlag: true,
                })
            });
        }

    }

    /*添加需求数-数据*/
    demandQuantity(index, num, data) {
        /*参数data是需求数表格数组*/
        let dataSourceSelf = this.state.dataSource;
        dataSourceSelf[index].needCount = num;
        dataSourceSelf[index].planNeedCountModelList = data;
        this.setState({
            dataSource: dataSourceSelf
        }, () => {
            this.refs.DemandQuantityModal.setState({
                DemandQuantityFlag: false,
                dataSource: [],
            });
        });
    }

    //显示上传图片弹框
    showimgmodal(index, imgURL) {
        // console.log(index, imgURL);
        this.refs.addimg.imageUrl = imgURL;
        this.refs.addimg.setState({
            visible: true,
            index: index,
            imageUrl:imgURL
        });
    }

    //点击弹框确定之后url赋给src
    showImg(url, index) {
        let dataSource = this.state.dataSource;
        if (!dataSource[index]) {
            dataSource[index] = {}
        }
        // let context = dataSource[index];
        // context['imgUrl'] = url;
        dataSource[index].imgUrl = url;
        this.setState({
            dataSource: dataSource,
        });
        this.refs.addimg.setState({
            visible: false,
        });
    }
    /**
     * */
    //获取上传图片所需的token
    getQiniuToken(){
        Relay.Store.commitUpdate(
            new GetQiNiuToken({}), {
                onSuccess: (res) => {
                    let errorCode = res.getQiNiuToken.getQiNiuToken.errorCode;
                    if(errorCode==0){
                        let qiniutoken = res.getQiNiuToken.getQiNiuToken.qiniutoken;
                        this.setState({
                            token:qiniutoken
                        });
                    }
                }
            }
        );
    }
    /*上传图片之前验证*/
    beforeUpload(file){
        const MaxSize = 8;  //最大限度 8M;
        // 图片格式
        if(file.type !== "image/jpeg" && file.type !== "image/jpg" && file.type !== "image/png" && file.type !== "image/gif" && file.type !== "image/bmp"){
            message.error("图片格式错误");
            return false;
        }

        // 图片大小
        if( file.size / 1024 / 1024 > MaxSize ){
            message.error("图片大小超过限制");
            return false;
        }

        // 限制图标张数
        /*if(this.state.item.imgJSON >= 10){
         message.info("超过限制，图片做多只可上传10张");
         return false;
         }*/
    }
    accept = ".jpg,.png,.gif,.jpeg,.bmp";
    //上传图片配置
    uploadPlugin = {
        className:"",
        action:"http://up-z2.qiniu.com",
        beforeUpload:this.beforeUpload,
        listType:"picture-card",
        accept:this.accept,
    };
    //上传成功回调
    addFileImg(file,index){
        //console.log("上传成功");
        //console.log(file);
        let dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
        if (file) {
            //console.log(file);
            let imgUrl = {};
            imgUrl.name = file.name;
            imgUrl.url =this.addimgUrl+file.response.key;
            imgUrl.key = file.response.key;
            dataSource[index].imgUrl = JSON.stringify(imgUrl);
            this.setState({
                dataSource: dataSource,
            })
        }
    }
    //删除图片
    picRemove(index){
        let dataSource = JSON.parse(JSON.stringify(this.state.dataSource));
        let key = dataSource[index].imgUrl.split(this.addimgUrl)[1];
        if(!key){ return }
        this.delete_key.push(key);//
        dataSource[index].imgUrl = "";
        this.setState({
            dataSource:dataSource,
        });
        this.getQiniuToken();//重新获取token
        // console.log(key);

    }
    //点击保存删除七牛缓存
    deletepic_all(){
        let dataSource = this.state.dataSource;
        let delete_key = this.delete_key;
        dataSource.map((v,i)=>{
            let img_key = v.imgUrl && v.imgUrl.split(this.addimgUrl)[1];
            delete_key = delete_key.filter((m,n)=>{
                return m != img_key;
            })
        });
        let key = delete_key.join(",");
        //console.log(key);
        if(!key)return;
        Relay.Store.commitUpdate(
            new DelQiniuFileMutation({
                fileKey: key
            }),
            {
                onFailure: () => {
                    message.error("网络请求失败")
                },
                onSuccess: (response) => {
                    let errorCode = response.delQiniuFile.delQiniuFile.errorCode;
                    if (errorCode == 0) {
                        //清除七牛缓存
                        //message.error("删除七牛成功")
                    }else{
                        //message.error("服务器错误，请联系管理员")
                    }
                }
            }
        )
    }
    render() {
        let {dataSource, proDigestModel,token} = this.state;
        const {value, editable} = this.state;
        const columns = [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
                width: 80,
                render: ((text, record, index) => {
                    return index + 1
                })
            },
            {
                title: "物料类型",
                dataIndex: 'materielType',
                key: 'materielType',
                width: 100,
                render: (text, record, index) => {
                    //console.log(record.materielType);
                    /*0613*/
                    function handleChange(value) {
                        let dataSourceSelf = this.state.dataSource;
                        dataSourceSelf[index].materielType = value;
                        dataSourceSelf[index].orderType = this.materiel_order[value];
                        this.setState({
                            dataSource: dataSourceSelf,
                            materielType:value,
                        });
                    }
                    return (
                        <span ref={"selectBox"}>
                            <Select
                                defaultValue={record.materielType?this.materielType[record.materielType]:this.materielType[1]}
                                value={record.materielType?this.materielType[record.materielType]:this.materielType[1]}
                                style={{ width: 100 }}
                                onChange={handleChange.bind(this)}
                                //getPopupContainer={()=>this.refs.selectBox}
                                className="order_creat_select"
                                dropdownClassName="order_creat_select_drop"
                            >
                                <Option value="1">面料</Option>
                                <Option value="2">缝制辅料</Option>
                                <Option value="3">包装辅料</Option>
                            </Select>
                        </span>
                    )
                }
            },
            {
                title: <span><i className="prodution_fabricRaw_text_red">*</i>品名</span>,
                dataIndex: 'productName',
                key: 'productName',
                width: 260,
                className:"productName_icon_box",
                onCellClick: (record, e, index) => {
                    /* this.setState({
                     materialPlanId:record.planId,
                     });
                     this.refs.SelectMaterialModal.setState({
                     SelectMaterialFlag:true,
                     })*/
                },
                render: (text, record, index) => {
                    /*let flag;
                    if (record.productName == null || record.productName == undefined || record.productName == "") {
                        flag = true
                    } else if (record.productName && record.productName.length >= 1) {
                        flag = false
                    } else {
                        flag = false
                    }
                    return flag ? (
                        <span className="prodution_fabricRaw_edit_span_edit_productName" ref={"productName"}
                              onClick={this.materialClick.bind(this, record, index)}
                              title={record.productName}>{record.productName}</span>
                    ) : (
                        <span className="prodution_fabricRaw_edit_span_edit_input" ref={"productName"}
                              onClick={this.materialClick.bind(this, record, index)}
                              title={record.productName}>{record.productName}</span>
                    )*/
                    /*0613*/
                    /*return (
                        <span className="productName_span prodution_fabricRaw_productName_span">
                            <Input
                                addonAfter={<Icon className="productName_icon" type="ellipsis" onClick={this.materialClick.bind(this, record, index)}/>}
                                key={record.planId + index + "productName"}
                                title={record.productName} rows={1} maxLength="50"
                                className="prodution_fabricRaw_edit_input_ant"
                                onChange={this.InputChange.bind(this, 'productName', index)}
                                value={record.productName} type="text"
                                ref={"productName"}
                            />
                        </span>
                    )*/
                    return (
                        <span className="">
                            <input
                                key={record.planId + index + "productName"}
                                title={record.productName} rows={1} maxLength="50"
                                className="prodution_fabricRaw_edit_input_edit_icon"
                                onChange={this.InputChange.bind(this, 'productName', index)}
                                value={record.productName} type="text"
                                ref={"productName"}
                            />
                            <Icon className="productName_icon" type="ellipsis" onClick={this.materialClick.bind(this, record, index)}/>
                        </span>
                    )
                }
            },
            {
                title: '图片',
                dataIndex: 'imgUrl',
                key: 'imgUrl',
                width: 200,
                onCellClick: (record, e) => {
                    // console.log("图片");

                },
                render: ((text, record, index) => {
                   /* return (
                        <img width="94" height='32' style={{height: 32}}
                                 className="prodution_fabricRaw_td_img_context" alt="+添加图片" src={record.imgUrl}
                                 onClick={this.showimgmodal.bind(this, index, record.imgUrl)}/>
                    )*/

                    let imgUrl = record.imgUrl?JSON.parse(record.imgUrl):null;
                    console.log(record.imgUrl.url);
                    let fileList = imgUrl && imgUrl.url ? [{
                        uid: "-"+imgUrl.key,
                        name: imgUrl.name,
                        status: 'done',
                        url:imgUrl.url,
                    }] :null;
                    return (
                        <span className="production_manage_fabric_imgUpload">
                            <AddPictureModal
                                ref={"addPictureModal"}
                                uploadPlugin={this.uploadPlugin}
                                fileList={fileList}
                                token={token}
                                index={index}
                                handleChangeFlag={true}
                                addFileImg={this.addFileImg.bind(this)}
                                _picRemove={this.picRemove.bind(this)}
                            />
                        </span>
                    )
                })
            },
            {
                title: '描述/规格',
                dataIndex: 'specification',
                key: 'specification',
                width: 100,
                render: (text, record, index) => {
                    return (
                        <input key={record.planId + index + "specification"}
                               title={record.specification} rows={1} maxLength="50"
                               className="prodution_fabricRaw_edit_input_edit"
                               onChange={this.InputChange.bind(this, 'specification', index)}
                               value={record.specification} type="text" ref={"specification"}
                        />
                    )
                }
            },
            {
                title: '颜色',
                dataIndex: 'colour',
                key: 'colour',
                width: 100,
                render: (text, record, index) => {
                    return (
                        <input key={record.planId + index + "colour"}
                               title={record.colour} rows={1} maxLength="50"
                               className="prodution_fabricRaw_edit_input_edit"
                               onChange={this.InputChange.bind(this, 'colour', index)}
                               value={record.colour} type="text" ref={"colour"}
                        />
                    )
                }

            },
            {
                title: '单位',
                key: 'prickle',
                dataIndex: 'prickle',
                width: 100,
                render: (text, record, index) => {
                    return (
                        <input key={record.planId + index + "prickle"}
                               title={record.prickle} rows={1} maxLength="50"
                               className="prodution_fabricRaw_edit_input_edit"
                               onChange={this.InputChange.bind(this, 'prickle', index)}
                               value={record.prickle} type="text" ref={"prickle"}
                        />
                    )
                }
            },
            {
                title: <span><i className="prodution_fabricRaw_text_red">*</i>需求数</span>,
                dataIndex: 'needCount',
                key: 'needCount',
                width: 150,
                render: (text, record, index) => {
                    let flag;
                    if (record.needCount == null || record.needCount == undefined || record.needCount == "" || record.needCount == 0) {
                        flag = true
                    } else {
                        flag = false
                    }
                    return flag ? (
                        <span className="prodution_fabricRaw_edit_span_edit_needCount" ref={"needCount"}
                              onClick={this.demandQuantityClick.bind(this, record, index)}></span>
                    ) : (
                        <span className="prodution_fabricRaw_edit_span_edit_input" ref={"needCount"}
                              onClick={this.demandQuantityClick.bind(this, record, index)}>{record.needCount}</span>
                    )
                }
            },
            {
                title: "本次到料数",
                dataIndex: 'thisTimeCount',
                key: 'thisTimeCount',
                width: 100,
                render: (text, record, index) => {
                    return <input key={record.planId + index + "thisTimeCount"}
                                  className="prodution_fabricRaw_edit_input_edit"
                                  onChange={this.InputChange.bind(this, 'thisTimeCount', index)}
                                  type="text"  value={record.thisTimeCount}
                                  ref={(item)=>{this.ref_thisTimeCount[index] = item}}
                                  maxLength="10"
                    />
                }
            },
            {
                title: '累计到料数',
                dataIndex: 'totalCount',
                key: 'totalCount',
                width: 200,
                render: (text, record, index) => {
                    return <span className="" ref={"totalCount"}>{Math.round(Number(record.totalCount))}</span>
                }
            },
            {
                title: '差异数',
                dataIndex: 'varianceCount',
                key: 'varianceCount',
                width: 100,
                render: (text, record, index) => {

                    return <span className=""
                                 ref={"varianceCount"}>{Number(record.totalCount).toFixed(2) - Number(record.needCount)}</span>
                },
            },
            {
                title: '到料比例(%)',
                key: 'ratio',
                dataIndex: 'ratio',
                width: 150,
                render: (text, record, index) => {
                    const ratio = (record.totalCount && record.needCount) ? Number(record.totalCount / record.needCount) * 100 : 0;
                    return <span className="" ref={"ratio"}>{Math.round(ratio)}%</span>
                }
            },
            {
                title: '备注',
                dataIndex: 'remark',
                key: 'remark',
                width: 200,
                render: (text, record, index) => {
                    return (<input key={record.planId + index + "remark"}
                                   title={record.remark} rows={1} maxLength="50"
                                   className="prodution_fabricRaw_edit_input_edit"
                                   onChange={this.InputChange.bind(this, 'remark', index)}
                                   value={record.remark} type="text" ref={"remark"}
                    />)
                }
            },
            {
                title: '',
                dataIndex: '',
                key: '',
                width: 120,
                render: (text, record, index) => {
                    if (index == this.state.dataSource.length - 1) {
                        return (
                            <span>
                                <a className="order_from_sp_add" onClick={this.handleAdd.bind(this)}></a>&nbsp;
                                <a className="order_from_sp_minus"
                                   onClick={this.onDelete.bind(this, index, record.planId)}></a>
                            </span>
                        )
                        /*if (index != 0) {
                         return (
                         <span>
                         <a className="order_from_sp_add" onClick={this.handleAdd.bind(this)}></a>&nbsp;
                         <a className="order_from_sp_minus" onClick={this.onDelete.bind(this, index, record.planId)}></a>
                         </span>
                         )
                         } else {
                         return (<a className="order_from_sp_add" onClick={this.handleAdd}></a>)
                         }*/
                    } else {
                        return (
                            <a className="order_from_sp_minus"
                               onClick={this.onDelete.bind(this, index, record.planId)}></a>
                        )
                    }
                },
            }
        ];
        return (
            <div className="poduction_manage_box">
                <div className="prodution_fabricRaw_index_info">
                    <span className="productionLicense_index_p">
                        <span className="productionLicense_index_span">订单编号：</span>
                        <span className="productionLicense_index_orderspan">{proDigestModel.orderId}</span>
                    </span>
                    <span className="productionLicense_index_p">
                        <span className="productionLicense_index_span">客户：</span>
                        <span className="productionLicense_index_orderspan">{proDigestModel.customerName}</span>
                    </span>
                    <span className="productionLicense_index_p">
                        <span className="productionLicense_index_span">款号：</span>
                        <span className="productionLicense_index_orderspan">{proDigestModel.styleNo}</span>
                    </span>
                </div>
                <div style={{width:""}}>
                    <Table
                        columns={columns}
                        dataSource={dataSource}
                        //bordered
                        className="order_table"
                        pagination={false}
                        style={{ marginTop: "20px"}}
                        loading={this.state.loading}
                        scroll={{x:1212}}
                    />
                </div>
                <SelectMaterialModal
                    key={"SelectMaterial"}
                    ref={"SelectMaterialModal"}
                    _selectMaterial={this.selectMaterial.bind(this)}
                    _materialIndex={this.state.materialIndex}
                    _planId={this.state.planId}
                />
                <DemandQuantityModal
                    ref={"DemandQuantityModal"}
                    _demandQuantity={this.demandQuantity.bind(this)}
                    _demandQuantityIndex={this.state.demandQuantityIndex}
                    _planNeedCountModelList={this.state.planNeedCountModelList}
                    _planId={this.state.planId}
                    key = {ReactKey.key}
                />
                <AddImgModal ref={'addimg'} showImg={this.showImg.bind(this)} key={ReactKey.key}/>
                <div className="production_management_save">
                    <Button className="production_management_saveBtn" onClick={this.saveMateriaClick.bind(this)}>保存</Button>
                </div>
            </div>
        )
    }
}
